在 Vue3 的專案基礎配置當中，官方將原先的 Vuex4 進入維護模式，並且推薦大家去使用 pinia 來進行狀態管理，那麼 pinia 有什麼好處並且該怎麼用呢，下面讓我們開始吧

引用 pinia

import {createApp} from 'vue'
import {createPinia} from 'pinia'

// 建立 pinia 實例
const pinia = createPinia();
const app = createApp(App);

// 將 pinia 加入進 Vue 實例
app.use(pinia);
app.mount('#app');

建立第一個 store

狀態管理工具中，會有一個一個的 store 來將各種業務邏輯切開，並且讓我們在不同的頁面利用這些內容，這邊我們先建立一個 user 的 store

// @/stores/user.js
import {defineStore} from 'pinia'
import {ref} from 'vue'

export const storeUser = defineStore('userStore', {
    store:() => {
        const name = ref('leo')
        const setName = (val) => {
            name.value = val;
        }
        return {
            name,
            setName
        }
    },
})

並且在我們需要的頁面將他引用進來即可

@/pages/home.vue
<template>
    <div>name = {{ _storeUser.userName }}</div>
</template>
<script setup>
import { storeUser } from "@/stores/storeAuth";
const _storeUser = storeUser();

_storeUser.setName('allen');
</script>